
<template>
  <div id="app">
    <div class="nvobox">
      <el-container class="layout-container-demo" style="height: 100%">
        <el-aside>
          <el-scrollbar>
            <el-menu
              :default-active="active"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
            >
              <template v-for="(item, index) in menuList" :key="index">
                <el-menu-item :index="item.index" v-if="!item.children" @click="goToAbout(item)">
                  <el-icon>
                    <icon-menu />
                  </el-icon>
                  <span>{{ item.text }}</span>
                </el-menu-item>

                <el-sub-menu :index="item.index" v-else>
                  <template #title>
                    <el-icon>
                      <location />
                    </el-icon>
                    <span>{{ item.text }}</span>
                  </template>
                  <el-menu-item-group title="Group One">
                    <el-menu-item
                      v-for="(itx, inx) in item.children"
                      :key="inx"
                      :index="itx.index"
                      @click="goToAbout(itx)"
                    >
                      {{
                      itx.text
                      }}
                    </el-menu-item>
                  </el-menu-item-group>
                </el-sub-menu>
              </template>
            </el-menu>
          </el-scrollbar>
        </el-aside>
      </el-container>
    </div>
    <div class="box">
      <div class="top">
        <el-breadcrumb separator="/">
          <template v-for="(item, index) in arr" :key="index">
            <el-breadcrumb-item v-if="index == 0" :to="{ path: '/' }" @click="goToAbout(item)">
              {{
              item.text
              }}
            </el-breadcrumb-item>
            <el-breadcrumb-item v-if="index != 0">{{ item.text }}</el-breadcrumb-item>
          </template>
        </el-breadcrumb>
      </div>
      <div class="content">
        <RouterView />
      </div>
    </div>
  </div>
</template>
<script setup>
import setRem from "@/utils/rem";
import { RouterView } from "vue-router";
import { ref, reactive, onMounted, nextTick } from "vue";
import menuList from "./views/menu";
import { useRouter } from "vue-router"; // 引入useRouter函数
const active = ref("0");
const router = useRouter(); // 使用useRouter函数获取router实例
const arr = ref([{ text: "首页", path: "/", index: "0" }]);
const goToAbout = itx => {
  console.log(57, itx);
  active.value = itx.index;
  router.push({ path: itx.path }); // 使用name进行跳转或者使用path: '/about'来直接指定路径
  arr.value = [];
  myMenuList.value.map(item => {
    //首页
    if (item.index == itx.index) {
      arr.value.push(item);
    }
    //其他
    item.children
      ? item.children.map(itam => {
          if (itx.index == itam.index) {
            arr.value.push(myMenuList.value[0]);
            arr.value.push(item);
            arr.value.push(itam);
          }
        })
      : "";
  });
  console.log(64, arr.value);
};
const myMenuList = ref([]);

onMounted(() => {
  myMenuList.value = menuList;
  nextTick(() => {
    setRem();
  });
});
</script>
<style lang="less" scoped>
#app {
  // width: 7680px;
  // height: 2160px;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  .nvobox {
    width: 800px;
    height: 100%;
    box-sizing: border-box;
  }
  .box {
    width: calc(100vw - 800px);
    height: 100%;
    box-sizing: border-box;
    .top {
      width: 100%;
      height: 178px;
      border: none;
      box-sizing: border-box;
      // border: 1px solid red;
      background: rgb(237, 238, 240);
      .el-breadcrumb {
        height: 100%;
        font-size: 60px;
        line-height: 178px;
        padding-left: 50px;
      }
    }
    .content {
      width: 100%;
      height: calc(100% - 178px);
    }
  }
}
layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}
/deep/.el-sub-menu {
  font-size: 60px;
  .el-sub-menu__title {
    font-size: 60px;
    height: 180px;
    .el-sub-menu__icon-arrow {
      svg {
        width: 60px !important;
        height: 60px !important;
        font-size: 40px !important;
      }
    }
    span {
      font-size: 60px;
    }
  }
}

/deep/ .el-container {
  // border: 1px solid gainsboro;
  .el-aside {
    background: #fff !important;
  }
}
.el-menu-item {
  height: 180px;
  font-size: 60px;
}
.el-menu-item.is-active {
  color: #fff !important;
  background: rgb(49, 120, 212);
  height: 180px;
  font-size: 60px;
  padding: 20px;
}
:deep .el-menu-item-group__title {
  display: none;
}
.layout-container-demo .el-aside {
  width: 100%;
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>
